/* eslint-disable */
import React from 'react';
import { connect } from 'dva';
import { Select, Switch, Button, Table, Pagination, Input, message, Modal } from 'antd';
import { VtxGrid, VtxSearchMap } from 'vtx-ui';
import { Map } from 'react-amap'
import { NAME_SPACE, Add_Form, hospitalList, SearchParams } from '../../../components/CollectionObjManage/config'
import styles from './collectionObjManage.less'
import moment from 'moment'
import Action from '../../../components/CollectionObjManage/Action'
import AddItem from '../../../components/CollectionObjManage/AddItem'
import ViewItem from '../../../components/CollectionObjManage/ViewItem'
import MapSearch from '../../../components/CollectionObjManage/mapSearch'

const Option = Select.Option

const Index = ({dispatch, collectionObjManage}) => {
  const {
    loading,
    pageNo,
    pageSize,
    total,
    searchParams,
    oldSearchParams,
    selectedRowKeys,
    dataList,
    // 详情可见
    detailsModelVisable,
    details,
    // 添加可见
    addLoading,
    addModelVisable,
    addForm,
    default_columns,
    // id
    modifyId,
    // 地图可见
    mapVisable,
    mapCenter,
    points,
  } = collectionObjManage

  const gridProps = {
    titles: ['医疗机构名称', '类型'],
    gridweight: [1, 1],
    // 点击确定
    confirm: () => {
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {
          type: 'search'
        }
      })
    },
    // 重置
    clear: () => {
      dispatch({
        type:`${NAME_SPACE}/updateState`,
        payload:{
            searchParams: {
                ...SearchParams
            },
            pageNo: 1,
            pageSize: 20,
        }
      });
      dispatch({
          type:`${NAME_SPACE}/getList`,
          payload:{type:"search"}
      });
    },
  }

  // 查看详情
  const viewShow = (id) => {
    dispatch({
      type: `${NAME_SPACE}/getDetail`,
      payload: {
        type: 'view',
        id: id,
      }
    })
  };
  // 编辑
  const addShow = (id) => {
    // console.log(id)
    dispatch({
      type: `${NAME_SPACE}/getDetail`,
      payload: {
        type: 'modify',
        id: id,
      }
    })
  } 

  const changeValue = (name, value) => {
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'searchParams',
        data: {
          [name]: value
        }
      }
    }) 
  }

  const actionProps = {
    showBtns:['delete','add'],
    addAction: () => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          addModelVisable: true,
          modifyId: "",
          // 每次新增前清空上一次的填写数据
          addForm: {...Add_Form},
        }
      })
    },
    deleteAction: () => {
      if (!selectedRowKeys || (Array.isArray(selectedRowKeys) && selectedRowKeys.length==0) ) {
        message.error("抱歉,您没有选中任何数据！");
        return;
      }
      Modal.confirm({
        title:"警告！",
        // selectedRowKeys
        content:`您确定要删除选中的${selectedRowKeys.length}条数据？`,
        cancelText:"取消",
        okText:"确定",
        okType:"danger",
        onCancel:()=>{

        },
        onOk:()=>{
            dispatch({
                type: `${NAME_SPACE}/_delete`,
                payload: {selectedRowKeys},
            });
        },
      });
    },
  }

  // 医院类型
  const getType = (type) => {
    let name
    switch (type) {
      case 1:
        name = '医院';
        break;
      case 2:
        name = '诊所';
        break;
      case 3:
        name = '疾病预防控制中心';
        break;
      case 4:
        name = '社区卫生服务中心';
        break;
      case 5:
        name = '门诊部';
        break;
      case 6:
        name = '卫生所';
        break;
      case 7:
        name = '卫生室';
        break;
      case 8:
        name = '卫生院';
        break;
      case 9:
        name = '服务站';
        break;
      default:
        break;
    }
    return name
  }

  const tableProps = {
    autoFit: true,
    hideColumn: false,
    indexColumn: true,
    scroll:{
      y:`${document.documentElement.clientHeight - 92 - 120}px`,
    },
    showHeader: true,
    startIndex: (pageNo) * pageSize + 1,
    dataSource: dataList,
    loading: loading,
    pagination: false,
    columns: [
      {
        title: '序号', 
        key: '0',
        dataIndex: '0',
        ellipsis: true,
        render:(text,record,index)=>`${index+1}`
      },{
        title: '医疗机构名称', 
        key: 'hospitalName',
        dataIndex: 'hospitalName',
        ellipsis: true,
      },{
        title: '类型', 
        key: 'hospitalType',
        dataIndex: 'hospitalType',
        ellipsis: true,
        render:(text,record,index)=>{
          return getType(text)
        }
      },{
        title: '地址', 
        key: 'hospitalAddress',
        dataIndex: 'hospitalAddress',
        ellipsis: true,
      },{
        title: '联系人', 
        key: 'contacts',
        dataIndex: 'contacts',
        ellipsis: true,
      },{
        title: '联系方式', 
        key: 'phone',
        dataIndex: 'phone',
        ellipsis: true,
      },
      // {
      //   title: '小程序账号名称', 
      //   key: 'userName',
      //   dataIndex: 'userName',
      //   ellipsis: true,
      // },{
      //   title: '小程序账号密码', 
      //   key: 'password',
      //   dataIndex: 'password',
      //   ellipsis: true,
      // },
      {
        title: '账号状态', 
        key: 'status',
        dataIndex: 'status',
        ellipsis: true,
        render:(text,record,index)=>{return text == 1? '冻结' : text == 2?'正常' : ''}
      },{
        title: '操作', 
        key: '9',
        dataIndex: '9',
        ellipsis: true,
        render: (text, record, index) => {
          return(
            <div>
              <a onClick={() => {viewShow(record.hospitalId)}}>查看</a> | <a onClick={() => {addShow(record.hospitalId)}}>编辑</a>
            </div>
          )
        }
      }
    ],
    rowKey: (record, index) => {
      return record.hospitalId
    },
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: selectedRowKeys || [],
      onChange: (selectedRowKeys, selectedRows) => {
        // console.log(selectedRows)
        let ids = selectedRows.map((item) => {
            return item.hospitalId;
        });
        dispatch({
          type: `${NAME_SPACE}/updateState`,
          payload: {
            selectedRowKeys: ids
          }
        })
      },
    },
  }
  const pagProps = {
    current: pageNo ,
    defaultCurrent: 1,
    total: total,
    pageSize: pageSize,
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: (page) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: page
        }
      });
      // 获取新的列表（page）
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {
          type: 'page'
        }
      })
    },
    showTotal: (total) => {
        return `合计${total}条数据`
    },
    onShowSizeChange: (current, pageSize) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: 1,
          pageSize: pageSize,
        }
      });
      // 获取新的列表（page）
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {
          type: 'page'
        }
      })
    },
  }

  const addProps = {
    dispatch,
    addLoading,
    addModelVisable,
    addForm,
    modifyId,
    points,
    goMap:()=>{
      dispatch({
          type:`${NAME_SPACE}/updateState`,
          payload:{
            mapVisable:true
          }
      });
      // setInterval(() => {console.log(document.getElementById("container"))}, 3000)
      // console.log(document.getElementById("container"))
    }
  }

  const viewProps = {
    dispatch,
    detailsModelVisable,
    details,
  }

  const mapProps = {
    dispatch,
    mapVisable,
    modifyId,
  }

 

  return (
    <div className={styles.normal}>
      <AddItem {...addProps}/>
      <ViewItem {...viewProps}/>
        {/* {
          mapVisable?
          <div style={{width: 300, height: 300}} className={styles.map}>
            <Map events={() => {amapEvents()}} style={{width: 300, height: 300}} amapkey={'26af0bc8d92fb85b3b5dcc39dba3e611'}/>
          </div>
          :""
        } */}
      <div className={styles.searchWarp}>
        <VtxGrid {...gridProps}>
          <Input
            value={searchParams.hospitalName}
            onChange={(e) => {changeValue('hospitalName', e.target.value)}}
            allowClear
            style={{width: '100%'}}
          />
          <Select
            value={searchParams.hospitalType}
            onChange={(value) => {changeValue('hospitalType', value)}}
            allowClear
            optionFilterProp='children'
            style={{width: '100%'}}
          >
            {
              Array.isArray(hospitalList)?
                hospitalList.map((item, index) => {
                  return(<Option value={item.id}>{item.name}</Option>)
                })
              :''
            }
          </Select>
        </VtxGrid>
      </div>
      <Action {...actionProps}/>
      <div className={styles.table} style={{ height: document.documentElement.clientHeight - 92 }}>
        <div className={styles.tableContent}>
          <Table {...tableProps}/> 
        </div>  
        <div className={styles.pagination}>
          <span className={styles.pagContent}> <Pagination {...pagProps}/> </span>  
        </div>  
      </div>  
      {
        mapVisable?
          <MapSearch {...mapProps}/>
        :""
      }
       
    </div>
  )
}

export default connect(state=>state)(Index)